<template>
  <div class="header_top">
    <v-head />
    <!-- 面包屑导航 -->
    <template>
      <div class="bread">
        <div class="container">
          <span class="text fl"> 您的当前位置：</span>
          <el-breadcrumb class="fl" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/stroylist' }">我们的故事</el-breadcrumb-item>
            <el-breadcrumb-item>{{ info.title }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </template>

    <!-- 详情 -->
    <div class="show_srory">
      <div class="container">
        <div class="row">
          <div class="left fl">
            <div class="over">
              <img src="../../img/img/6.jpg" class="w100" alt="" />
            </div>
          </div>
          <div class="fr right">
            <div>
              <div class="text_by">
                这里有我们在活动中发生的一些精彩
                故事,试着创建一个活动、团队,让我们 一起碰撞一下.
              </div>
              <div class="text_small">
                创建活动、团队,利用Jujuamici高效的管理它们
              </div>
              <div class="more ma">
                <router-link to="/release" target="_blank">创建活动</router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="show_stroy_two">
      <div class="container">
        <div class="top clearfix">
          <div class="fl left">
            <div class="name">{{ info.title }}</div>
            <div class="data">
              {{ info.create_time | formatDate }} <span>所属活动：</span>
              <router-link :to="{ path: '/hotshow', query: { id: info.activity.id } }">{{ info.activity.title }}</router-link>
            </div>
          </div>
          <div class="right fr">
            <div class="fr">
              <div>
                <div>作者：{{ info.user.nickname }}</div>
                <div>{{ info.user.bio }}</div>
              </div>
            </div>
            <div class="fr">
              <div class="img" :style="{
                    backgroundImage: 'url(' + $api + info.user.avatar + ')',
                  }"
		  ></div>
            </div>
          </div>
        </div>
        <div class="bot">
          <div class="text" v-html="info.content">

          </div>
          <!--div class="row">
            <div class="col-md-6 col-sm-6">
              <div class="over">
                <img src="../../img/img/7.jpg" class="w100" alt="" />
              </div>
            </div>
            <div class="col-md-6 col-sm-6">
              <div class="over">
                <img src="../../img/img/8.jpg" class="w100" alt="" />
              </div>
            </div>
          </div-->
        </div>
      </div>
    </div>
    <div class="about_story">
      <div class="container">
        <div class="ny_title">类似故事</div>
        <ul class="clearfix story_ul row">

          <li class="col-md-6"
            v-for="(item, index) in this.relativeList"
            :key="index"

	  >
            <div class="clearfix" @click="goToLink">
              <router-link :to="{path:'/stroyshow',query:{id:item.id}}" class="fl left bl">
                <div
                  class="img"
                  :style="{
                    backgroundImage: 'url(' + $api + item.image + ')',
                  }"
                ></div>
              </router-link>

              <div class="fr right">
                <div class="clearfix data">
                  <div class="fl">{{ item.create_time | formatDate }}</div>
                  <div class="fr">
                    <i class="iconfont icon-yanjing"></i>{{ item.views }}
                  </div>
                </div>
                <!-- :to="{ path: item.url }"  -->
                <router-link :to="{path:'/stroyshow',query:{id:item.id}}" class="bl name line2">{{
                  item.title
                }}</router-link>
                <div class="text line2" v-html="item.content">
                  {{ item.content }}
                </div>
              </div>
            </div>
          </li>

        </ul>
      </div>
    </div>
    <!-- 尾部 -->
    <v-foot />
  </div>
</template>

<script>
import vHead from "../../websitecom/Head.vue";
import vFoot from "../../websitecom/Foot.vue";
import vBread from "../../websitecom/Bread.vue";
import { formatDate } from "../../assets/data.js";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    vHead,
    vFoot,
    vBread,
    swiper,
    swiperSlide,
  },
  // 时间戳
  filters: {
    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  data() {
    return {
      info: [],
      relativeList: [],
    };
  },
  methods: {
     goToLink() {
       this.$router.go(0)
    },
    getInfo() {
      var that = this;
      this.$axios
        .get(
          this.$api +
          "//api/story/detail?id="+this.$route.query.id
        )
        .then(function (response) {
          that.info = response.data.data;
            document.title = response.data.data.title + "-聚聚阿米奇";
          //console.log(that.info);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getList() {
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/story/relative?id="+this.$route.query.id
        )
        .then(function (response) {
          that.relativeList = response.data.data;
          //console.log(that.relativeList);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
    beforeCreate: function () {
    document.getElementsByTagName("body")[0].className = "active";
    document.getElementsByTagName("html")[0].className = "active";
  },
 mounted() {
    //设置滚动条指定
    document.documentElement.scrollTop=0;
   this.getInfo();
   this.getList();
  },
};
</script>

<style lang="less" scoped>
html.active  {
  overflow-y: scroll !important;
  height: auto !important;
}
.show_srory {
  padding: 3.75rem 0;
  background-color: #f7f8fa;
}
.show_srory {
  .left {
    width: 71.5%;
    padding-right: 1.875rem;
    img {
      height: 31.25rem;
    }
  }

  .right {
    width: 28.5%;

    > div {
      background-color: #1ba260;
      padding: 3.75rem 3.75rem 6.25rem;  height: 31.25rem;
    }

    .text_by {
      font-size: 1.125rem;
      line-height: 2.1875rem;
      color: #ffffff;
    }

    .text_small {
      font-size: 1rem;
      line-height: 1.875rem;
      color: #ffffff;
      margin: 1.25rem 0 5.15rem;
    }

    .more {
      background: #fff;
      border: none;

      a {
        color: #1ba260;
      }
    }

    .more:hover {
      background: #de5044;

      a {
        color: #fff;
      }
    }
  }
}
.show_stroy_two {
  padding: 3.75rem 0;

  .name {
    font-size: 1.25rem;
    line-height: 2.25rem;
    color: #000000;
  }

  .data {
    font-size: 1rem;
    line-height: 1.875rem;
    color: #848484;

    span {
      color: #000;
    }

    a {
      color: #848484;
    }
  }

  .top {
    .right {
      width: 30%;

      .fr:nth-child(2) {
        .img {
          width: 4.1875rem;
          height: 4.1875rem;
          border-radius: 50%;
          background-size: cover !important;
          background-repeat: no-repeat !important;
        }

        margin-right: 1.0625rem;
      }

      .fr:nth-child(1) {
        height: 4.1875rem;
        display: table;

        > div {
          height: 4.1875rem;
          display: table-cell;
          vertical-align: middle;

          div:nth-child(1) {
            font-size: 1rem;
            line-height: 1.875rem;
            color: #000000;
          }

          div:nth-child(2) {
            font-size: 0.875rem;
            line-height: 1.5rem;
            color: #848484;
          }
        }
      }
    }

    .left {
      width: 70%;
    }
  }

  .bot {
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid #e0e0e0;
  }
}
.about_story {
  padding-bottom: 6.25rem;
}
</style>
